import React, {Component} from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import {Toast, WhiteSpace, WingBlank} from "antd-mobile"
import './GuessCard.css'
import ThumbIcon from "../../../../../../res/images/web/game-room/up@2x.png"
import CustomButton from "../../../../../../shared-components/CustomButton/CustomBotton";

class GuessCard extends Component {

    constructor(props) {
        super(props)
        this.matchId = this.props.match.params.gameId
        this.uid = localStorage.getItem('userid')
    }

    componentDidMount() {
        const userDetail = this.props.user.userdetail
        if (userDetail.initFlag === 1) {
            this.props.doFetchMatchGuess({mid: Number(this.matchId), uid: this.uid,})
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        const userFlagPrev = prevProps.user.userdetail.initFlag
        const userFlag = this.props.user.userdetail.initFlag
        if (userFlagPrev !== userFlag && userFlag === 1) {
            this.props.doFetchMatchGuess({mid: Number(this.matchId), uid: this.uid,})
        }
    }

    guessMatch = (value, guessed, finished,) => {
        let mid = Number(this.matchId)
        let t = value

        if (finished) {
            // Toast.fail('比赛已经结束 无法竞猜')
            return
        }

        if (guessed) {
            Toast.info('您已经投票过')
            return
        }

        this.props.doGuessMatch({mid, t, uid: this.uid,})
            .then(() => Toast.info('投票成功'))
    }

    render() {
        const currentGame = this.props.currentGame
        const {
            guess,
            info: {
                statusid,
            }
        } = currentGame
        let guessed = false
        let finished = false
        if (guess.guessed !== -1 && guess.guessed !== undefined) {
            guessed = true
        }
        if (statusid >= 8) {
            finished = true
        }

        const guessData = {
            host: guess.Guesswin,
            tied: guess.Guesstie,
            guest: guess.Guesslose,
        }
        let hostPer, tiedPer, guestPer

        const guessTotal = Object.values(guessData).reduce((acc, cur) => acc + cur, 0)
        if (guessTotal === 0) {
            hostPer = 0
            tiedPer = 0
            guestPer = 0
        } else {
            hostPer = `${Math.floor(guessData.host / guessTotal * 100)}`
            tiedPer = `${Math.floor(guessData.tied / guessTotal * 100)}`
            guestPer = `${Math.floor(guessData.guest / guessTotal * 100)}`
        }


        const hostColor = '#FA7268'
        const tiedColor = '#FFA500'
        const guestColor = '#0FC6A6'
        const unClickColor = 'rgba(51,51,51,0.1)'

        const hostStripStyle = {
            width: hostPer + '%',
            height: '20px',
            backgroundColor: hostColor,
            borderRadius: hostPer === '100' ? '10px' : '10px 0 0 10px',
        }

        let tiedStripeRadius

        if (tiedPer === '100') {
            tiedStripeRadius = '10px'
        } else {
            if (hostPer === '0') {
                tiedStripeRadius = '10px 0 0 10px'
            } else if (guestPer === '0') {
                tiedStripeRadius = '0 10px 10px 0'
            } else {
                tiedStripeRadius = '0'
            }
        }


        const tiedStripeStyle = {
            width: tiedPer + '%',
            height: '20px',
            backgroundColor: tiedColor,
            borderRadius: tiedStripeRadius,
        }

        const guestStripeStyle = {
            width: guestPer + '%',
            height: '20px',
            backgroundColor: guestColor,
            borderRadius: guestPer === '100' ? '10px' : '0 10px 10px 0',
        }

        const initStripStyle = {
            width: '100%',
            height: '20px',
            backgroundColor: '#f9f9f9',
            borderRadius: '10px',
        }


        const guessItemTemplate = type => {

            const o = {
                host: {title: '主胜', color: hostColor, per: hostPer, value: 1,},
                tied: {title: '平局', color: tiedColor, per: tiedPer, value: 0,},
                guest: {title: '客胜', color: guestColor, per: guestPer, value: 2,},
            }

            const itemGuessed = guessData[type] === 1

            const dotStyle = {
                backgroundColor: o[type].color,
            }

            const perStyle = {
                color: o[type].color,
                fontSize: '22px',
                lineHeight: '26px',
                textAlign: 'center',
            }

            const btn = <div
                style={{
                    width: '60px',
                    height: '24px',
                    backgroundColor: guessed || finished ? unClickColor : o[type].color,
                    borderRadius: '12px',
                    margin: '0 auto'
                }}
                className='flex-center-align-center'
                onClick={(e) => this.guessMatch(o[type].value, guessed, finished)}
            >
                {itemGuessed
                    ? null
                    : <img src={ThumbIcon} alt='' style={{height: 20, width: 20,}}/>
                }

                <span style={{color: 'white',}}>{itemGuessed ? '已顶' : '顶'}</span>
            </div>

            const template = (
                <div style={{width: '33%',}}>
                    <div className='flex-center-align-center'>
                        {/*<div className='game-room-analysis-guess-card-dot' style={dotStyle}/>*/}
                        <div className='game-room-analysis-guess-card-dot-text'>{o[type].title}</div>
                        <div style={perStyle}>{o[type].per !== 'NaN' ? o[type].per : ''}<span style={{fontSize: '14px',}}>%</span></div>
                    </div>
                    {btn}
                </div>
            )
            return template
        }

        const guessCard = (
            <div className='game-room-analysis-guess-card'>
                <div className='game-room-analysis-guess-card-stripe'>
                    {guessTotal !== 0
                        ? (
                            <>
                                <div style={hostStripStyle}/>
                                <div style={tiedStripeStyle}/>
                                <div style={guestStripeStyle}/>
                            </>
                        )
                        : (
                            <div style={initStripStyle}/>
                        )
                    }

                </div>
                <WhiteSpace/>
                <WingBlank>
                    <div className='flex-space-between-align-center'>
                        {guessItemTemplate('host')}
                        {guessItemTemplate('tied')}
                        {guessItemTemplate('guest')}
                    </div>
                </WingBlank>
            </div>
        )

        const guessTitle = (
            <div className='flex-space-between-align-center'>
                <div className='game-room-analysis-title'>猜胜负</div>
                <div className='game-room-analysis-subtitle'>{guessTotal}人参与</div>
            </div>
        )

        return <WingBlank>
            <WhiteSpace/>
            {guessTitle}
            <WhiteSpace/>
            {guessCard}
            <WhiteSpace/>
        </WingBlank>
    }

}

const mapState = (state) => ({
    user: state.user,
    currentGame: state.game.currentGame,
})

const mapDispatch = (dispatch) => ({

    doGuessMatch: (payload) => dispatch.game.doGuessMatch(payload),
    doFetchMatchGuess: (payload) => dispatch.game.doFetchMatchGuess(payload),

})

export default connect(mapState, mapDispatch)(withRouter(GuessCard))
